﻿@{
    Layout = null;    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云排课-登录</title>
    <link rel="stylesheet" href="/Static/css/login.css">
</head>
<body>
    <div class="container">
        <div class="login-content">
            <div class="login-logo">
                <a href="/home">
                    <img src="/Static/images/logo-all.png" width="385" height="65" alt="">
                </a>
            </div>
            <div class="login-change">
                <a href="javascript:void(0);" data-type="email" class="tab active">邮箱注册</a>
                <span>|</span>
                <a href="javascript:void(0);" data-type="phone" class="tab ">手机号注册</a>
            </div>
            <div class="login-form">
                <div class="form-email">
                    <div class="form-group">
                        <i class="user-icon"></i>
                        <div class="form-input">
                            <input type="text" id="emailAddress" placeholder="请输入您的邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <i class="password-icon"></i>
                        <div class="form-input">
                            <input type="password" id="password" placeholder="请输入您的密码">
                        </div>
                        <i class="password-show-hide"></i>
                    </div>
                    <div class="form-group">
                        <i class="password-icon"></i>
                        <div class="form-input code-input">
                            <input type="text" id="emailCaptcha" placeholder="请输入验证码">
                            <img src="/Utility/ValidateCode" width="115" height="42" id="captchaRefresh2">
                        </div>
                    </div>
                </div>
                <div class="form-phone" style="display: none;">
                    <div class="form-group">
                        <i class="user-icon"></i>
                        <div class="form-input">
                            <input type="text" id="mobileAddress" placeholder="请输入您的手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <i class="password-icon"></i>
                        <div class="form-input">
                            <input type="password" id="password2" placeholder="请输入您的密码">
                        </div>
                        <i class="password-show-hide"></i>
                    </div>
                    <div class="form-group">
                        <i class="password-icon"></i>
                        <div class="form-input code-input">
                            <input type="text" class="" id="phoneCaptcha" placeholder="请输入验证码">
                            <img src="/Utility/ValidateCode" width="115" height="42" id="captchaRefresh">
                        </div>
                    </div>
                    <div class="form-group">
                        <i class="password-icon"></i>
                        <div class="form-input code-input">
                            <input type="text" id="mobileCaptcha" placeholder="请输入短信验证码">
                            <button class="btn-dx" id="getCaptcha">获取短信验证码</button>
                        </div>
                    </div>
                </div>
                <p class="user-protocol">
                    点击注册，即同意我们的
                    <a href="/Home/UserAgreements">用户协议</a>
                </p>
                <a class="register login-btn register-btn">注册</a>
                <a class="login login-btn" href="/Home/Login">已有账号直接登录</a>
            </div>
        </div>
        <div class="login-bottom">
            Copyright © 2018 - 2020 武汉华志创科技有限公司 <span>|</span>湖北省武汉市洪山区软件园E4
        </div>
    </div>
    <input type="hidden" id="register_Type" value="0" />
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <script src="../../Static/FindPassword/assets/js/regexHelper.js"></script>
    <script type="text/javascript">
        $(".login-change .tab").click(function () {
            var type = $(this).attr('data-type');
            if ($(this).hasClass('active')) {
                return;
            }
            $(".login-change .tab").removeClass('active');
            $(this).addClass('active');
            if (type == 'phone') {
                $("#register_Type").val("1");
                $('.form-phone').show();
                $('.form-email').hide();
            } else if (type == 'email') {
                $("#register_Type").val("0");
                $('.form-email').show();
                $('.form-phone').hide();
            }
        })
    </script>
    <script type="text/javascript">
        $(function () {
            // 注册登录
            $(".register-btn").on("click", function () {
                var result = validateForm();
                if (result) {
                    //$.post
                    $.post("Register",
                        result,
                    function (data) {
                        if (data.status) {
                            window.location.href = "/Home";
                        } else {
                            $(".login-form input").parent("div").addClass("error-info");
                            alert("[" + result.userName + "]" + data.info);
                        }
                    },
                    "json")
                }
            });

            // 手机验证
            $("#mobileAddress").on("blur", function () {
                var $this = $(this);
                if (!RegexHelper.isPhonePass($this.val())) {
                    $this.parent("div").addClass("error-info");
                } else {
                    $this.parent("div").removeClass("error-info");
                }
            })

            // 手机密码验证
            $("#password2").on("blur", function () {
                var $this = $(this);
                if ($this.val() == '' || $this.val().length < 6) {
                    $this.parent("div").addClass("error-info");
                } else {
                    $this.parent("div").removeClass("error-info");
                }
            })

            // 验证码
            $("#phoneCaptcha").on("blur", function () {
                var $this = $(this);
                if (!RegexHelper.isCodePass($this.val())) {
                    $this.parent("div").addClass("error-info");
                } else {
                    $this.parent("div").removeClass("error-info");
                }
            })


            $("#mobileCaptcha").on("blur", function () {
                var $this = $(this);
                if (!RegexHelper.isPhoneCodePass($this.val())) {
                    $this.parent("div").addClass("error-info");
                } else {
                    if ($this.val() != '') {
                        $this.parent("div").removeClass("error-info");
                    }
                }
            })


            /// 验证码正则
            var codeRegex = /^[0-9a-zA-Z]{4}$/;
            /// 邮箱注册验证表单
            function validateForm() {
                // 获取注册类型 
                var registerType = $("#register_Type").val();
                var account = registerType == "0" ? $("#emailAddress").val() : $("#mobileAddress").val();
                var password = registerType == "0" ? $("#password").val() : $("#password2").val();
                var validateCode = registerType == "0" ? $("#emailCaptcha").val() : $("#phoneCaptcha").val();
                regex = registerType == "0" ? /\w[-\w.+]*@@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/ : /^0?(13|14|15|17|18|19)[0-9]{9}$/;

                if (!regex.test(account)) {
                    // alert("账号格式错误!");// 给出错误提示
                    if (registerType == "0") { // 邮箱注册
                        $("#emailAddress").parent("div").addClass("error-info");
                    } else {
                        $("#mobileAddress").parent("div").addClass("error-info");
                    }
                    return false;
                } else {
                    $("#emailAddress").parent("div").removeClass("error-info");
                    $("#mobileAddress").parent("div").removeClass("error-info");
                }

                if (password.length < 6) {
                    registerType == "0" ? $("#password").parent("div").addClass("error-info") : $("#password2").parent("div").addClass("error-info");
                    return false;
                } else {
                    $("#password").parent("div").removeClass("error-info");
                    $("#password2").parent("div").removeClass("error-info");
                }

                if (!validateCode) {
                    registerType == "0" ? $("#emailCaptcha").parent("div").addClass("error-info") : $("#phoneCaptcha").parent("div").addClass("error-info");
                    return false;
                } else {
                    $("#emailCaptcha").parent("div").removeClass("error-info");
                    $("#phoneCaptcha").parent("div").removeClass("error-info");
                }

                if (registerType == "1") {
                    var codeRegex = /^\d{4}$/;
                    var $that = $("#mobileCaptcha");
                    if (!codeRegex.test($that.val())) {
                        $that.parent("div").addClass("error-info");
                        return false;
                    } else {
                        if ($that.val() != '') {
                            $that.parent("div").removeClass("error-info");
                        }
                    }
                }

                var obj =
                    {
                        registerType: registerType,
                        userName: account,
                        password: password,
                        validateCode: validateCode,
                        phoneValidateCode: $("#mobileCaptcha").val()
                    };

                return obj;
            }

            // 获取焦点取消样式
            $(".login-form input").focus(function () {
                $(this).parent("div").removeClass("error-info");
            });

            // 失去焦点，如果文本框为空，也不要错误样式
            $(".login-form input").blur(function () {
                var $this = $(this);
                if ($this.val() == '') {
                    $this.parent("div").removeClass("error-info");
                }
            })

            // 获取验证码
            $("#captchaRefresh").on("click", function () {
                $(this).attr("src", "/Utility/ValidateCode?v=" + Math.random());
            });

            $("#captchaRefresh2").on("click", function () {
                $(this).attr("src", "/Utility/ValidateCode?v=" + Math.random());
            });

            // 获取手机验证码
            $("#getCaptcha").on("click", function () {
                var $this = $(this);
                if ($this.attr("data-isGetCode")) return;
                var phoneNum = $("#mobileAddress").val();
                var phoneReg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
                if (!phoneReg.test(phoneNum)) { $("#mobileAddress").addClass("error-info"); return; }

                // 往后台请求短信发送验证。
                $.get("/Utility/getPhoneValidateCode", { phoneNum: phoneNum }, function (data) {
                    $this.attr("data-isGetCode", "isGet");
                    setPhoneCodeCountDown($this);
                });
            });

            //验证手机号验证码是否正确(无需重复验证)
            $("#mobileCaptcha").blur(function () {
                var $this = $(this);
                if ($this.attr("data-isGetCode")) { return; }
                var codeRegex = /^\d{4}$/;
                if ($this.val() == '') { $(this).parent().removeClass("error-info"); return; }  // 如果没有输入验证码，直接返回。
                if (!codeRegex.test($this.val())) { return; }

                $.get("/Utility/PhoneCodeValidate", { code: $this.val() }, function (data) {

                    if (data.isPass) {
                        console.log(data);
                    } else {
                        $("#mobileCaptcha").parent("div").addClass("error-info");
                    }
                })
            })

            var _timer;
            var countSec = 60;
            function setPhoneCodeCountDown(obj) {
                _timer = setInterval(function () {
                    if (countSec == 0) {
                        obj.removeAttr("data-isGetCode");
                        obj.text("获取短信验证码");
                        clearInterval(_timer);
                        countSec = 60;
                        return;
                    }
                    obj.text(countSec);
                    countSec--;
                }, 1000);
            }

            $(".password-show-hide").on("click", function () {
                console.log("aaaaa");
                var registerType = $("#register_Type").val();
                var paswdID = registerType == "0" ? "password" : "password2";
                var type = $("#" + paswdID).attr("type") == "password" ? "text" : "password";
                $("#" + paswdID).attr("type", type);
            });
        })
    </script>
</body>
</html>
<script type="text/javascript">
    $(function () {
        // 解决 safari 浏览器样式不兼容的问题
        $(".container").css({
            width: $(window).width(),
            height: $(window).height()
        })
    })

</script>

<style type="text/css">
    .error-info {
        border-bottom: 1px solid #e02145 !important;
    }
</style>
